<template>
	<view style="background-color: #f2f2f2;position: relative;">
		
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="订单详情"></com-nav-bar>
		</view>
		
		<view :style="{marginTop:fixedTopHeight+'px'}" v-if="orderDetail">
	
			<!-- 顶部地址信息 -->
			<view style="background-color: #fff;display: flex;align-items: center;padding: 20rpx;">
				<view style="width: 48px;height: 48px;">
					<svg t="1755227111414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4929" width="48" height="48">
						<path d="M511.999488 949.020308c-117.532857 0-228.322126-18.036795-311.960011-50.78771-89.400123-35.006282-138.635477-83.833337-138.635477-137.485281 0-27.15036 13.024641-67.624167 75.074859-106.260116 43.931558-27.352975 105.499799-49.376571 178.050162-63.686485 10.534937-2.079358 20.759813 4.776793 22.838148 15.312754 2.077312 10.534937-4.777817 20.759813-15.312754 22.837124-132.644019 26.163893-221.763756 79.129198-221.763756 131.796722 0 36.011168 41.525766 72.925916 113.927749 101.276614 79.229482 31.024597 184.984085 48.110741 297.782104 48.110741 112.798019 0 218.551598-17.08512 297.78108-48.110741 72.40403-28.350698 113.928772-65.264423 113.928772-101.276614 0-53.358255-90.715071-106.633622-225.734184-132.569318-10.546194-2.025123-17.452487-12.216229-15.426341-22.7614 2.025123-10.547217 12.220323-17.452487 22.7614-15.426341 73.634044 14.144138 136.194892 36.170804 180.917466 63.696718 63.11855 38.848797 76.367295 79.662341 76.367295 107.060341 0 53.651944-49.234331 102.478999-138.635477 137.485281C740.321614 930.984536 629.531322 949.020308 511.999488 949.020308zM512.012791 768.30955c-5.720282 0-11.384281-2.511193-15.223726-7.334036-92.082208-115.657136-145.973606-214.814484-174.967964-277.630135-30.347169-65.7464-40.566928-106.270349-41.764196-111.246687-5.770424-20.85191-8.696056-42.488697-8.696056-64.314795 0-64.276932 25.031093-124.706233 70.481238-170.157401 45.451168-45.451168 105.880469-70.481238 170.157401-70.481238 10.737552 0 19.442818 8.704243 19.442818 19.442818 0 10.737552-8.705266 19.442818-19.442818 19.442818-111.246687 0-201.753003 90.506317-201.753003 201.753003 0 18.428721 2.480494 36.682457 7.372921 54.251601l0.211824 0.830925c0.085958 0.367367 9.552563 40.024575 39.969317 105.638969 28.078499 60.57154 80.263022 156.279323 169.410388 268.251533 6.688329 8.400321 5.300726 20.6319-3.100618 27.320229C520.531815 766.925017 516.256442 768.30955 512.012791 768.30955zM515.917728 768.30955c-4.243651 0-8.518001-1.384533-12.096503-4.233418-8.400321-6.688329-9.788947-18.919908-3.100618-27.320229 171.202197-215.035518 209.017454-372.32689 209.378681-373.890502l0.211824-0.829901c4.892427-17.571191 7.372921-35.823903 7.372921-54.251601 0-111.246687-90.505293-201.753003-201.753003-201.753003-10.737552 0-19.442818-8.705266-19.442818-19.442818 0-10.738575 8.705266-19.442818 19.442818-19.442818 64.276932 0 124.706233 25.031093 170.157401 70.481238 45.450145 45.451168 70.481238 105.880469 70.481238 170.157401 0 21.824051-2.925632 43.459814-8.696056 64.313771-1.195222 4.972245-11.414981 45.497217-41.764196 111.24771-28.994358 62.815651-82.885755 161.972998-174.967964 277.630135C527.303033 765.797333 521.636986 768.30955 515.917728 768.30955zM511.999488 433.513438c-63.685461 0-115.496477-51.811016-115.496477-115.496477s51.811016-115.496477 115.496477-115.496477c63.684438 0 115.496477 51.811016 115.496477 115.496477S575.683926 433.513438 511.999488 433.513438zM511.999488 241.405095c-42.243103 0-76.610842 34.367739-76.610842 76.610842s34.367739 76.610842 76.610842 76.610842 76.610842-34.367739 76.610842-76.610842S554.242592 241.405095 511.999488 241.405095z" fill="#000000" p-id="4930"></path>
					</svg>
				</view>
				<view style="margin-left: 20rpx;">
					<view style="font-size: 12pt;">
						<text>{{jsonFormat(orderDetail.extend).address_name}}</text>
						<text style="margin-left: 20rpx;">{{jsonFormat(orderDetail.extend).address_mobile}}</text>
					</view>
					<view style="font-size: 10pt;" v-line-clamp='2'>{{jsonFormat(orderDetail.extend).address_str}}</view>
				</view>
			</view>
			
			<view class="default-view" style="display: flex;justify-content: space-between;align-items: center;">
				<view>订单号：{{orderDetail.order_no}}</view>
				<u-button size="mini" shape="circle" style="margin: 0;" @click="copyText(orderDetail.order_no)">复制</u-button>
			</view>
			
			<view class="default-view">
				<!-- 订单商品信息 -->
				<view style="display: flex;padding: 20rpx 0;" v-for="(itm,idx) in orderDetail.details" :key="idx">
					<image style="width: 200rpx;height: 200rpx;margin-right: 20rpx;flex-shrink:0;" lazy-load="true" :src="jsonFormat(itm.extend).cover_pic"></image>
					<view style="height:200rpx;display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;">
						<view v-line-clamp='1' style="font-size: 28rpx;height: 28rpx;line-height: 28rpx;">{{jsonFormat(itm.extend).goods_name}}</view>
						<view v-line-clamp='1' style="font-size: 10pt;color: #909399;">{{jsonFormat(itm.extend).attr_str}}</view>
						<view style="font-size: 10pt;">
							<text>单价：</text>
							<text style="text-decoration: line-through;font-size: 9pt;color:#909399">￥{{jsonFormat(itm.extend).original_price}}</text>
							<text style="font-weight: 600;">￥{{itm.unit_price}}</text>
						</view>
						<view style="font-size: 12pt;">
							<text style="font-weight: 600;margin-right: 20rpx;">x{{itm.goods_num}}</text>
							<text style="color:red;font-size: 10pt;">小计：{{itm.price}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="default-view" style="display: flex;justify-content: space-between;align-items: center;" @click="orderStatusDetailVisible = true">
				<view>订单状态：{{orderDetail.status | orderStatusDesc}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			
			<view class="default-view" style="display: flex;justify-content: space-between;align-items: center;" @click="orderPriceDetailVisible = true">
				<view>总计：<text style="color:red;font-size: 14pt;font-weight: 600">￥{{orderDetail.pay_price}}</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			
			
			<view class="default-view" style="display: flex;justify-content: flex-end;align-items: center;">
				<u-button type="warning" plain v-if="orderDetail.status == 0" size="mini" shape="circle" style="margin: 10rpx;" @click="">去付款</u-button>
				<u-button type="warning" plain v-if="orderDetail.status >= 20 && orderDetail.status < 30" size="mini" shape="circle" style="margin: 10rpx;" @click="">确认收货</u-button>
				<u-button type="warning" plain v-if="orderDetail.status == 0" size="mini" shape="circle" style="margin: 10rpx;" @click="">取消订单</u-button>	
			</view>
		</view>
		
		<!-- 订单金额明细 -->
		<u-popup v-model="orderPriceDetailVisible" mode="top" closeable length="100%">
			<view style="padding: 100rpx 20rpx 0;">
				<view class="default-view" v-if="jsonFormat(orderDetail.extend).extraTotalFee">
					附加费用：<text v-for="(item,index) in jsonFormat(orderDetail.extend).extraTotalFee" :key="index">{{item.name}} {{item.total}}。</text>
				</view>
				<view class="default-view">
					商品总计：{{orderDetail.goods_price}}
				</view>
				<view class="default-view">
					运费总计：{{orderDetail.express_price}}
				</view>
				<view class="default-view">
					抵扣金额：{{orderDetail.deduct_price}}
				</view>
				<view class="default-view">
					总计：<text style="color:red;font-size: 14pt;font-weight: 600">￥{{orderDetail.pay_price}}</text>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="orderStatusDetailVisible" mode="top" closeable length="100%">
			<view style="padding: 100rpx 40rpx 0;">
				<u-time-line>
					<u-time-line-item v-for="(item,index) in orderDetail.statusLogs" :key="index">
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{item.after_status | orderStatusDesc}}</view>
								<view class="u-order-desc">{{item.desc}}</view>
								<view class="u-order-time">{{formatTimeToStr(item.created_at)}}</view>
							</view>
						</template>
					</u-time-line-item>
					
					<u-time-line-item>
						<template v-slot:content>
							<view>
								<view class="u-order-title">订单提交</view>
								<view class="u-order-desc">订单提交成功，请于{{formatTimeToStr(parseInt(orderDetail.created_at)+1800)}}付款，超时将自动取消订单。</view>
								<view class="u-order-time">{{formatTimeToStr(orderDetail.created_at)}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			
		</u-popup>
		
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	let that;
	export default {
		data(){
			return {
				fixedTopHeight:0,
				order_no: '',
				orderDetail:'',
				
				orderPriceDetailVisible:false,
				orderStatusDetailVisible:false,
			}
		},
		beforeCreate(){
			that = this;
		},
		onLoad(opt){
			that.order_no = opt.order_no ?? '';
			that.getOrderDetail();
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			});
		},
		computed: {
			jsonFormat(){
				return data => {
					if( typeof data == 'string'){
						data = JSON.parse(data);
					}
					return data ?? {};
				}
			},
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			},
		},
		filters:{
			orderStatusDesc(type){
				const orderStatusMaps = {
					'0': '未付款',
					'10': '待发货',
					'30': '待收货',
					'40': '已收货',
					'100': '已完成',
					'-1': '已取消',
					'5': '取消中'
				}
				return orderStatusMaps[type] ?? '未知';
			}
		},
		methods:{
			back(){
				this.navBack();
			},
			copyText(text){
				uni.setClipboardData({
					data: text,
					success: function() {
						that.$http.toast("复制成功")
					}
				});
			},
			async getOrderDetail(){
				const res = await that.$http.request({
					url: that.$api.v2Order.orderDetail,
					method: 'post',
					data:{order_no:that.order_no},
					showLoading:true,
				});
				if(res.code !== 0){
					return that.$http.toast(res.msg);
				}
				this.orderDetail = res.data;
			}
		}
	}
</script>

<style lang="scss">
	.default-view{
		background-color: #fff;
		margin-top: 4rpx;
		padding: 20rpx;
	}
	
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
		
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>